<template>
  <el-dialog title="新增项目" :visible.sync="dialogFormVisible" @close="close" width="80%">
    <el-form :model="form">
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="项目名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目编号" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目状态" :label-width="formLabelWidth">
            <el-select v-model="form.region" placeholder="请选择活动区域">
              <el-option label="新建" value="shanghai"></el-option>
              <el-option label="续建" value="beijing"></el-option>
              <el-option label="交工" value="beijing"></el-option>
              <el-option label="竣工" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10" style="display:flex;align-items: center;margin-bottom: 22px;">
        <el-col :span="8" class="d-start">
          <el-form-item label="项目名称" style="margin-bottom: 0;" :label-width="formLabelWidth">
            <el-select v-model="form.region" placeholder="请选择活动区域">
              <el-option label="施工" value="shanghai"></el-option>
              <el-option label="监理" value="beijing"></el-option>
              <el-option label="验收" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="16" width="100%" height="100%">
          <div class="imgUpdata">
            <div class="imgList"></div>
            <div class="imgBtn">上传图片</div>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <el-row :gutter="10" style="display:flex;align-items: center;margin-bottom: 22px;">
      <el-col :span="24" width="100%" height="100%" class="d-start">
        <div class="img d-start">
          <span style="text">施工</span>
          <i class="d-center">
            <img src alt />
          </i>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10" style="display:flex;align-items: center;margin-bottom: 22px;">
      <el-col :span="24" width="100%" height="100%" class="d-start">
        <div class="img d-start">
          <span style="text">监理</span>
          <i class="d-center">
            <img src alt />
          </i>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10" style="display:flex;align-items: center;margin-bottom: 22px;">
      <el-col :span="24" width="100%" height="100%" class="d-start">
        <div class="img d-start">
          <span style="text">验收</span>
          <i class="d-center">
            <img src alt />
          </i>
        </div>
      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible=false">取 消</el-button>
      <el-button type="primary" @click="dialogFormVisible=false">保 存</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: ["dialogFormVisible1"],
  data() {
    return {
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      formLabelWidth: "120px",
      dialogFormVisible: false
    };
  },
  methods: {
    close() {
      this.$emit("close");
    }
  },
  watch: {
    dialogFormVisible1(news) {
      this.dialogFormVisible = news;
    },
    dialogFormVisible(news) {
      if (!news) {
        this.close();
      }
    }
  }
};
</script>

<style scoped lang="less">
.imgUpdata {
  width: 100%;
  height: 62px;
  border: 1px solid #ccc;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .imgList {
    height: 100%;
    width: calc(100% - 64px);
  }
  .imgBtn {
    position: absolute;
    right: 4px;
    top: 0;
    width: 60px;
    height: 100%;
    background: #ccc;
    border: 1px dashed #ccc;
    flex-shrink: 0;
    cursor: pointer;
    &:hover {
      border: 1px dashed blue;
    }
  }
}
.img {
  width: 100%;
  height: 100px;
  border: 1px solid #ccc;
  i {
    img {
      width: 130px;
      height: 95px;
      padding: 5px;
    }
  }
}
</style>